import React, { useState } from "react";
import styles from "./index.module.css";
import { List, Checkbox } from "antd-mobile";
import { useEffect } from "react";
import { BezierMaker } from "../../utils/index";
function ListItem({ data, onChange, isclearGroupvalue }) {
  const changeFn = (val, childer, value) => {
    childer.checked = val;
    onChange(childer);
  };
  const [value, setValue] = useState([]);
  useEffect(() => {
    if (isclearGroupvalue) {
      setValue([]);
    }
  }, [isclearGroupvalue]);
  return (
    <Checkbox.Group
      value={value}
      onChange={(v) => {
        setValue([v[v.length - 1]]);
      }}
    >
      {data.map((childer, childerIndex) => (
        <List.Item
          key={childerIndex}
          extra={
            <Checkbox
              value={childer.id}
              onChange={(val) => changeFn(val, childer, value)}
            />
          }
        >
          {childer.name}
        </List.Item>
      ))}
    </Checkbox.Group>
  );
}
function Tabs() {
  const [list, setList] = useState([
    {
      header: "复杂列表",
      data: [
        {
          id: "1",
          name: "新消息通知",
          checked: false,
        },
        {
          id: "2",
          name: "新消息通知",
          checked: false,
        },
        { id: "3", name: "新消息通知", checked: false },
      ],
    },
    {
      header: "复杂列表",
      data: [
        {
          id: "5",
          name: "新消息通知",
          checked: false,
        },
        {
          id: "6",
          name: "新消息通知",
          checked: false,
        },
        { id: "7", name: "新消息通知", checked: false },
      ],
    },
  ]);
  const [changeList, setChangeList] = useState([]);
  const changeFn = (childer) => {
    const newChangeList = changeList;
    if (changeList.length !== 0) {
      const findIndex = changeList.findIndex((item) => item.id === childer.id);
      if (findIndex !== -1) {
        newChangeList.splice(findIndex, 1, childer);
        setChangeList(newChangeList);
        return;
      }
    }
    newChangeList.push(childer);
    setChangeList(newChangeList);
  };
  useEffect(() => {
    // 创建一个 ResizeObserver 实例
    const observer = new ResizeObserver((entries) => {
      for (let entry of entries) {
        const { target, contentRect } = entry;
        const { width } = contentRect;
        dawnTabs();
      }
    });

    // 监听的目标元素
    const targetDiv = document.querySelector("#pthoneContainer");

    // 开始观察目标元素
    observer.observe(targetDiv);
  }, []);
  const dawnTabs = (
    radius = 60, // 控制突起宽度
    BumpHeight = 30, // 控制突起高度
    RightAngleRradius = 15, // 控制左右两边的直角弧度
    topBoderPos = 22 // 控制凸起下方矩形的高度
  ) => {
    const tabs = document.querySelector("#tabs").getBoundingClientRect();
    /** @type {HTMLCanvasElement} */
    var canvas = document.querySelector("#myCanvas");
    var ctx = canvas.getContext("2d"); //获得上下文
    const bgc = "#FFFFFF";
    const shadowColor = "#00000017";
    canvas.width = tabs.width;
    canvas.height = tabs.height;
    ctx.beginPath(); //开始路径
    ctx.moveTo(0, topBoderPos + RightAngleRradius);
    // 左边圆角
    RightAngleRadiusFn(
      ctx,
      0,
      topBoderPos + RightAngleRradius,
      RightAngleRradius,
      topBoderPos,
      RightAngleRradius,
      bgc
    );
    ctx.lineTo(canvas.width - radius, topBoderPos);
    dawnYuan(canvas, ctx, topBoderPos, BumpHeight, radius, bgc);
    ctx.lineTo(canvas.width - RightAngleRradius, topBoderPos);
    RightAngleRadiusFn(
      ctx,
      canvas.width - RightAngleRradius,
      topBoderPos,
      canvas.width,
      topBoderPos + RightAngleRradius,
      RightAngleRradius,
      bgc,
      "right"
    );
    ctx.lineTo(canvas.width, canvas.height);
    ctx.lineTo(0, canvas.height);
    ctx.lineTo(0, topBoderPos);
    // 设置阴影属性
    ctx.shadowBlur = 5; // 阴影的模糊程度
    ctx.shadowColor = shadowColor; // 阴影的颜色
    ctx.shadowOffsetX = 0; // 阴影在水平方向上的偏移量
    ctx.shadowOffsetY = -4; // 阴影在垂直方向上的偏移量
    ctx.fillStyle = bgc;
    ctx.fill(); //描边路径
  };
  const dawnYuan = (canvas, ctx, topBoderPos, BumpHeight, radius, bgc) => {
    const startX = canvas.width / 2 - radius;
    const startY = topBoderPos;
    const endX = canvas.width / 2 + radius;
    const endY = topBoderPos;
    ctx.lineTo(startX, startY);
    const step = (radius * 2) / 6;
    const controlPoints = [
      { x: startX, y: startY },
      { x: startX + step, y: startY }, // 第1个控制点
      { x: startX + step * 2, y: startY - 10 }, // 第2个控制点
      { x: startX + step * 3, y: startY - BumpHeight }, // 第3个控制点
      { x: startX + step * 4, y: startY - 10 }, // 第4个控制点
      { x: startX + step * 5, y: endY }, // 第5个控制点
      { x: endX, y: endY }, // 结束点
    ];
    const bezierMaker = new BezierMaker(ctx, controlPoints, bgc);
    bezierMaker.drawBezier();
  };
  const RightAngleRadiusFn = (
    ctx,
    startX,
    startY,
    endX,
    endY,
    RightAngleRradius,
    bgc,
    postion = "left"
  ) => {
    const y =
      postion === "left"
        ? startY - RightAngleRradius
        : endY - RightAngleRradius;
    const x = postion === "left" ? startX : endX;
    const controlPoints = [
      { x: x, y: y },
      { x: endX, y: endY },
    ]; // 结束点
    const bezierMaker = new BezierMaker(ctx, controlPoints, bgc);
    bezierMaker.drawBezier();
  };
  return (
    <div className={styles.container} id="pthoneContainer">
      <div>
        {list.map((item, index) => {
          if (!(item.data && item.data.length === 0)) {
            return (
              <List key={index} header={item.header || ""}>
                <ListItem onChange={changeFn} data={item.data}></ListItem>
              </List>
            );
          }
        })}
      </div>
      <div className={styles.tabs} id="tabs">
        <canvas height={"100%"} width={"100%"} id="myCanvas"></canvas>
      </div>
    </div>
  );
}
export default Tabs;
